<template>
  <div class="dashboard">
    <el-main height=500px>
      <el-container>
        <el-header height=250px>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item>
              <img :src="head1" alt="1">
            </el-carousel-item>
            <el-carousel-item>
              <img :src="head2" alt="2">
            </el-carousel-item>
            <el-carousel-item>
              <img :src="head3" alt="3">
            </el-carousel-item>
            <el-carousel-item>
              <img :src="head4" alt="4">
            </el-carousel-item>
          </el-carousel>
        </el-header>
        <el-container>
          <el-main>
            <el-container>
              <el-aside width="150px">
                <img :src="hotservice">
              </el-aside>
              <el-main>
                <el-form>
                  <el-row style="margin-bottom: 85px;">
                    <el-col :span="10">
                      <el-button type="primary" class="animated-button icon-text-button" @click="gotoCouple">
                        <el-icon>
                          <Plus />
                        </el-icon>
                        <span class="button-text">夫妻投靠办理</span>
                      </el-button>
                    </el-col>
                    <el-col :span="10">
                      <el-button type="primary" class="animated-button icon-text-button" @click="gotoCertificate">
                        <el-icon>
                          <Plus />
                        </el-icon>
                        <span class="button-text">身份证办理</span>
                      </el-button>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10">
                      <el-button type="primary" class="animated-button icon-text-button" @click="gotoHouseholdCreate">
                        <el-icon>
                          <Plus />
                        </el-icon>
                        <span class="button-text">家庭户口立户</span>
                      </el-button>
                    </el-col>
                    <el-col :span="10">
                      <el-button type="primary" class="animated-button icon-text-button" @click="gotoBirth">
                        <el-icon>
                          <ScaleToOriginal />
                        </el-icon>
                        <span class="button-text">出生申报办理</span>
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form>
              </el-main>
            </el-container>
          </el-main>
          <el-main>
            <div class="hot-service">
              功能搜索
            </div>
            <el-form-item>
              <el-autocomplete v-model="searchInput" :fetch-suggestions="querySearch" placeholder="请输入内容"
                @select="handleSelect" style="width: 150px; margin-left: 50px;" />
              <el-form-item style="margin-left: 50px">
                <el-button @click="search"
                  style="width: 60px; background-color: #409eff; color: antiquewhite;">搜索</el-button>
              </el-form-item>
            </el-form-item>
            <!-- 个人信息展示框 -->
            <div class="personal-info">
              <el-card>
                <h3>个人信息</h3>
                <p><strong>姓名:</strong> {{ personalInfo.name }}</p>
                <p><strong>警员编号:</strong> {{ personalInfo.id }}</p>
                <p><strong>所属派出所:</strong> {{ personalInfo.station }}</p>
              </el-card>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import head1 from "@/assets/head1.png";
import head2 from "@/assets/head2.png";
import head3 from "@/assets/head3.png";
import head4 from "@/assets/head4.png";
import hotservice from "@/assets/热门服务.png";
import { ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const officerInfo= store.getters.officerInfo;

const router = useRouter();

// 定义数据源数组
const dataSource = ref([
  // 示例数据
  { title: '主页', value: '主页' },
  { title: '立户', value: '立户' },
  { title: '个人信息', value: '个人信息' },
  { title: '出生申报', value: '出生申报' },
  { title: '夫妻投靠', value: '夫妻投靠' },
  { title: '子女投靠', value: '子女投靠' },
  { title: '死亡注销', value: '死亡注销' },
  { title: '人口迁出', value: '人口迁出' },
  { title: '查询记录', value: '查询记录' },
  { title: '流动人口管理', value: '流动人口管理' },
  { title: '重点人口管理', value: '重点人口管理' },
  { title: '身份证件管理', value: '身份证件管理' },
  { title: '居住证管理', value: '居住证管理' },
  { title: '警员信息', value: '警员信息' },
  { title: '警员账号', value: '警员账号' },
  { title: '业务可视', value: '业务可视' },
  { title: '派出所信息', value: '派出所信息' },
  // ...其他数据
]);
// 定义自动补全的模型
const searchInput = ref('');

// 查询建议的方法
const querySearch = (queryString, cb) => {
  const results = queryString
    ? dataSource.value.filter(item => item.title.toLowerCase().includes(queryString.toLowerCase()))
    : dataSource.value;
  cb(results);
};

// 处理选中建议的方法
const handleSelect = (item) => {
  // 更新输入框的值为选中项的标题
  searchInput.value = item.value;
};
const gotoCouple = () => {
  router.push('/residentPopulationManagement/changeIn/couple/');
}

const gotoCertificate = () => {
  router.push('/certificate/id-manage');
}

const gotoHouseholdCreate = () => {
  router.push('/household/create');
}

const gotoBirth = () => {
  router.push('/residentPopulationManagement/changeIn/birth/');
}
const filterTitles = (value, option) => {
  return option.meta.title.includes(value);
};

const search = () => {
  const routes = router.getRoutes();
  const route = routes.find(route => route.meta && route.meta.title === searchInput.value);

  if (route) {
    router.push(route);
  }
};

// 个人信息
const personalInfo = ref({
  name: officerInfo.name,
  id: "p"+officerInfo.officerId,
  station: officerInfo.policeStation.name
});
</script>

<style scoped>
.dashboard {
  display: flex;
  justify-content: center;
  align-content: center;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-service {
  background-color: #409eff;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  color: rgb(255, 255, 255);
}

@keyframes button-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  100% {
    transform: scale(1.2);
    /* 增加动画幅度 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    /* 增加阴影效果 */
  }
}

.animated-button {
  padding: 50px 45px;
  /* 调整内边距，使按钮大小一致 */
  font-size: 16px;
  /* 根据需要调整字体大小 */
  width: 175px;
  /* 设置固定宽度 */
  height: 50px;
  /* 设置固定高度 */
  margin: 0 10px;
  /* 设置外边距，增加按钮之间的间距 */
  transition: all 0.3s ease;
  animation: none;
}

.animated-button:hover {
  /* 鼠标悬停时的动画效果 */
  transform: scale(1.1);
  /* 调整动画放大比例 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  /* 调整阴影效果 */
}

/* 使用Flexbox布局来优化按钮的排列 */
.el-row {
  display: flex;
  justify-content: space-around;
  /* 按钮分布更加均匀 */
}

/* 确保按钮在动画播放时不会相互覆盖 */
.el-col {
  flex: 1;
  /* 让每个按钮占据相等的空间 */
  margin: 0 1px;
  /* 微调间距 */
}

.icon-text-button {
  display: flex;
  /* 使用Flexbox布局 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

.icon-text-button .el-icon {
  margin-right: 5px;
  /* 调整图标和文字之间的间距 */
}

.personal-info {
  margin-top: 20px;
  /* 添加一些上边距 */
}
</style>
